<template>
  <div class="login-container">
    <div class="left" />
    <div class="right">
      <div class="box">
        <h3>登录</h3>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
          <el-form-item label="用户名：" prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="ruleForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
// import { userLogin } from '@/api/user'
export default {
  name: '',
  data() {
    // 自定义判断
    var validateIsArray = (rule, value, callback) => {
      // if (!value) {
      //   callback(new Error('请勾选用户协议'))
      // } else {
      //   callback()
      // }
      // 下面代码： 先保证代码成功，最后再去玩技巧，优化代码
      value ? callback() : callback(new Error('请勾选用户协议'))
    }
    return {
      // v-model双向绑定
      ruleForm: {
        // 这里面的属性，起什么名称：去接口文档里面看（后端要什么参数，我们前端就起什么名称）
        mobile: '13800000002',
        password: '123456',
        isAgree: false
      },
      // 表单的正则和非空验证
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|5|6|7|8|9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码位数在6-20位', trigger: 'blur' }
        ],
        isAgree: [
          { 'validator': validateIsArray, 'trigger': 'change' }
        ]
      }
    }
  },
  methods: {
    // 点击登录按钮 判断是否完成正则和非空验证 完成即可弹框 登录成功 发送ajax请求 获取token
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.$message('登录成功')
          // 发送ajax请求
          /* const data = await request.post('/sys/login',{
            mobile:this.ruleForm.mobile,
            password:this.ruleForm.password
          })
          console.log(data) */
          // axios二次封装 userLogin
          /*  const data = await userLogin({
            mobile: this.ruleForm.mobile,
            password: this.ruleForm.password
          })
          console.log(data) */
          // 调用vuex里面的actions方法 传递参数
          await this.$store.dispatch('user/loginActions', {
            mobile: this.ruleForm.mobile,
            password: this.ruleForm.password
          })
          this.$router.push('/')
        } else {
          this.$message('请填写相关信息')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  // background-color: lightsalmon;
  // 百分比会有继承的概念，父元素100%，这里才有效果
  // height: 100%;
  height: 100vh; // 视口新单位 vw vh 屏幕的整个宽度是 100vw, 1vw就是1%的意思
  width: 100%;
  display: flex;
  // 默认flex布局的主轴方向;
  flex-direction: row;
  .left {
    // background: lightgreen;
    // 第一个1 有剩余空间是否扩大  flex-grow
    // 第二个1，空间不够是否自动缩小 flex-shrink
    // 第三个值， flex基准宽度（高度）
    // flex: 1 1 0%
    flex: 3; // 3 1 0%
    // 1. 如果在css里面 用了@符号，必须在@前面加个 ~，告诉浏览器，去查找编译之后的图片地址
    // background-image: url('~@/assets/common/login_back.png');
    // 2. 如果使用相对路径，不使用@符号
    background-image: url('../../assets/common/login_back.png');
    background-size: cover;
    background-repeat: no-repeat;
    // background-position: 50%;将图片向右侧移动50%
  }
  .right {
    // background-color: lightblue;
    flex: 2;
    // 你怎么杨实现一个 块级元素的  水平垂直居中？
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      // width: 100px;
      // height: 100px;
      // background: lightcyan;
      // el-input这个组件是element-ui的，渲染到浏览器之后，没有这个标签了
      // 但是会有一个类名叫 el-input
      .el-input {
        width: 300px;
      }
      h3 {
        margin-left: 25px;
      }
    }
  }
}
</style>
